<template>
	<view class="main">
		<view class="list">
			<view class="propertyItem" v-for="(item , index) in callList" :key="index"
				@click="handleCall(item.callNumber)">
				<wd-card>
					<view class="content">
						<!-- <view class="icon"></view> -->
						<view class="message">
							<view class="name">{{item.name}}</view>
							<view class="number">{{item.callNumber}}</view>
							<view class="about full-width">{{item.about}}</view>
						</view>
						<image src="/static/icon/phone.svg" style="width: 5vw;height: 5vh;"></image>
					</view>
				</wd-card>
			</view>
		</view>
	</view>

</template>

<script setup>
	const callList = [{
			name: '保卫处',
			callNumber: '123456789133',
			icon: '',
			about: '负责物品丢失、来访登记等工作'
		},
		{
			name: '物业大厅',
			callNumber: '123456789133',
			icon: '',
			about: '负责小区活动安排、工作管理、人员变动等工作'
		},
		{
			name: '保洁处',
			callNumber: '123456789133',
			icon: '',
			about: '负责小区垃圾回收、公共区域清洁等工作'
		}
	]

	const handleCall = (callNumber) => {
		console.log('wxcall', callNumber)
		wx.makePhoneCall({
			phoneNumber: callNumber
		})
	}
</script>

<style lang="less">
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;

		.content {
			display: flex;
			justify-content: space-between;

			.message {
				display: grid;
				grid-template-rows: auto;
				grid-template-columns: repeat(2, 1fr);
				width: 90%;
				
				.name {
					color: black;
				}
			}

		}

		.full-width {
			grid-column: span 2;
			grid-row: 2;
		}
	}
</style>